<template>
  <div v-if="pageCount>1">
    <nav aria-label="Page navigation">
      <ul class="pagination  pagination-sm justify-content-center">
        
        <span class="text-muted  d-none d-md-block" style="line-height: 30px;font-size: smaller;">共{{ total}}条</span>
        <select class="custom-select-sm mx-3 d-none d-md-block" v-model="pSize" title="每页多少条记录">
          <option v-for="(v,i) in pageSize" :key="i" :value="v">{{v}}条/页</option>
        </select>
        
        <li class="page-item" :class="{disabled: curPage === 1}" @click="prevPage" v-if="pageCount > 1">
          <a class="page-link">&lt;</a>
        </li>
        
        <li class="page-item" :class="{ active: curPage === 1 } " @click="page(1)"><a class="page-link">1</a></li>
        
        <li class="page-item " v-show="curPage > 5 && pageCount > 10"><a class="page-link">...</a></li>
        <li class="page-item " :class="{active: curPage === index+offset}" v-for="(item,index) in middlePages" @click="page(index+offset)">
          <a class="page-link">{{index+offset}}</a>
        </li>
        <li class="page-item " v-show="curPage < bigLimit && pageCount > 10"><a class="page-link">...</a></li>
        
        <li class="page-item" :class="{active: curPage === pageCount}" @click="page(pageCount)" v-if="pageCount > 1">
          <a class="page-link">{{pageCount}}</a>
        </li>
        
        <li class="page-item" :class="{disabled: curPage === pageCount}" @click="nextPage" v-if="pageCount > 1">
          <a class="page-link">&gt;</a>
        </li>
        
        <span class="mx-2 text-muted d-none d-md-block" style="font-size: smaller;line-height: 30px;">
          前往
          <input class="text-center" type="text" min="1" step="1" ref="goPage" :value="curPage" @change="goPage($event.target.value)" style="border-radius:6px;border: 1px solid #ccc;width:40px;height: 30px;" title="跳至多少页">
          页
        </span>
      </ul>
    </nav>
  </div>
</template>

<script>
  
  export default {
    props: {
      total: {
        type: Number,
        default: 0,
      },
      initPage: {
        type: Number,
        default: 1,
      },
      pageSize: {
        type: Array,
        default() {
          return [20];
        },
      },
    },
    data() {
      return {
        curPage: this.initPage ? this.initPage : 1,
        pSize: this.pageSize[0],
        pageCount: Math.ceil(this.total / this.pageSize[0]),
      };
    },
    computed: {
      middlePages() {
        if (this.pageCount <= 2) {
          return 0;
        } else if (this.pageCount > 2 && this.pageCount <= 10) {
          return this.pageCount - 2;
        } else {
          // return this.curPage > 999 ? 5 : 8;
          return 5;
        }
      },
      bigLimit() {
        return this.middlePages > 5 ? this.pageCount - 6 : this.pageCount - 3;
      },
      offset() {
        if (this.curPage <= 5) {
          return 2;
        } else if (this.curPage >= this.bigLimit) {
          return this.bigLimit - 2;
        } else {
          return this.middlePages > 5 ? this.curPage - 3 : this.curPage - 2;
        }
      },
    },
    methods: {
      goPage(curPage) {
        if (curPage > this.pageCount || curPage < 1) {
          this.$refs.goPage.value = this.curPage;
          return;
        }
        this.curPage = curPage;
        dump("---------");
        dump(this.offset);
      },
      page(indexPage) {
        this.curPage = indexPage;
      },
      prevPage() {
        if (this.curPage != 1) {
          this.page(this.curPage - 1);
        }
      },
      nextPage() {
        if (this.curPage != this.pageCount) {
          this.page(this.curPage + 1);
        }
      }
    },
    watch: {
      total(n, o) {
        this.pageCount = Math.ceil(n / this.pSize);
      },
      
      pSize(n) {
        this.pageCount = Math.ceil(this.total / n);
        this.curPage = this.curPage > this.pageCount ? this.pageCount : this.curPage;
        this.$emit('togglePage', {curPage: this.curPage, pageSize: n});
      },
      curPage: {
        immediate: true,
        handler: function (n) {
          this.$emit('togglePage', {curPage: n, pageSize: this.pSize});
        }
      },
    },
    mounted() {
      // dump(this.total);
    },
  };
</script>

<style lang="scss" scoped>

</style>
